<template>
	<div class="Mobile_Info">
		<div class="info">
			<footer>
				<div class="a">
					<img src="../../assets/img/背景图片.jpg" class="b"/>
					<div class="c">
						<span>
						用户名:{{user.account}}
					</span>
					
					
					<span>
						<p>硬币:88888 | 等级:1111 | 超级Vip</p>
					</span>
					<span>
					<button v-if="user!=null" @click='otu' class="dl">退出登录</button>
						</span>
					<div class="d">
						
					</div>
					
				</div>
				<div class="mine ">
				<span>
					<router-link to="updatinfo" style="margin-top: 3rem;">修改信息</router-link>
				</span>
				<span>
					<router-link to="updetpwd" style="">修改密码</router-link>
				</span>
				<span>
					<router-link to="updetfliex" style="">修改头像</router-link>
				</span>
		</div>
				
				</div>
			</footer>
			<!-- <button> 修改我的资料</button> -->
		</div>
		<div class="features">
			<router-link to="shopping">
				<i class="el-icon-shopping-cart-full">购</i>
			</router-link>
			<router-link to="Myorders">
				<el-link><i class="el-icon-goods">订</i></el-link>
			</router-link>
	
		</div>
		<div class="swiper">
			<MobileHomelist :proplist='catelist' proptitle='新书上市'></MobileHomelist>
		</div>
		
	</div>
	</div>
</template>

<script>
	import MobileHomeSwiper from '@/components/mobile/home/MobileHomeSwiper.vue'
	import MobileHomelist from '@/components/mobile/home/MobileHomelist.vue'
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		name: 'MobileInfo',
		components: {
			MobileHomeSwiper,
			MobileHomelist
		},
		data() {
			return {
				homelist: [],
				Hottype: 1,
				Hotnum: 6,
				account: '',
				name: '',
				homelist: [],
				bookslist: [],
				catelist:[],
				Hottype:1,
				Hotnum:6,
				TopSalenum:20
			}
		},
		created() {
			this.$axios.get('/api/public/findHot/' + this.Hottype + '/' + this.Hotnum).then((res) => { //轮播图
				if (res.status == 200) {
					this.homelist = res.data.data
				}
			}).catch((error) => {
				console.log(error);
			})
			this.$axios.get('api/public/book/findTopSale/'+this.TopSalenum).then((res1) => {//热门推荐
				if (res1.status == 200) {
					console.log(res1.data.data);
					this.catelist = res1.data.data;
					
				}
			}).catch((error) => {
				console.log(error);
			})
		},

		computed: {
			...mapState('user', ['user'])
		},
		methods: {
			...mapActions('user', ['selWord']),
			...mapActions('user', ['selToken']),

			otu() {
				this.selToken('')
				this.selWord(null)
				localStorage.clear()
				this.$router.push('/mobile/home');
				this.$message({
					message: "退出成功",
					type: "success"
				})
			}

		}
	}
</script>

<style scoped>
	.a{
		background-color: ;
		height: 30%;
		width: 100%;
	}
	.mine {
		height: 2rem;
		background-color: white;
		margin-top: 3rem;
	}
	.mine span{
		margin-left: 3rem;
	}
	.Mobile_Info{
		height: 100%;
		background-color: #f0d4a0;
	}
	.b{
		margin-left: 0.5rem;
		margin-top: 1.5rem;
		border-radius: 50%;
		width: 5rem;
		height: 5rem;
	}
	.c{
		width: 100%;
		height: 4rem;
		color: white;
		margin-top: -4.5rem;
		margin-left: 30%;
	}
	.mine{
		margin-top: 2rem;
	}
	.d{
		
		margin-top: -2rem;
		margin-left: 17rem;
	}
	.d button{
		background-color: white;
		border: 1px white;
	}
	.features{
		display: flex;
				justify-content: space-around;
				align-items: center;
				overflow: hidden;
				position: relative;
				height: 6em;
	}
	.Mobile_Info .features a {
			color: #18202f;
			font-size: 3rem;
		}
	
		.Mobile_Info .features a i {
	
			height: inherit
		}
		.dl{
			background-color: #fffae8;
		}
</style>